<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
    <head>
        <title>Absolute</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
        <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
    </head>

    <body>
        <h1>Absolute</h1>
        <div class="gp">
            <h2>Positioned Grandparent</h2>
            <div class="parent"><h2>Non-positioned Parent</h2>
                Absolute elements are positioned in their own layer in front of or behind the normal flow.   
                <span id="in_place_cls" class="box">In-place Absolute</span>
                <span id="sized_cls" class="box">Sized Absolute</span>
                <p id="stretched_cls" class="box">
                Stretched Absolute
                <img width="742" height="556" src="cl1-99.jpg" alt="Crater Lake 1" />
                </p>
                <p id="shrinkwrapped_cls" class="box">Shrinkwrapped Absolute</p>
            </div>
        </div>
    </body>
</html>
